<template>
    <ex-dialog
      width="600px"
      class="ex-diolog"
      :title="title"
      :visible="visible"
      :close-on-click-modal="false"
      @closeDialog="handleClose"
    >
      <div class="main" v-loading="loading">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :disabled="disabled" >
          <el-row>
            <el-col :span="24">
              <el-form-item label="有效期：" prop="days">
                <el-input
                  maxlength="50"
                  placeholder="请输入天数"
                  v-model="ruleForm.days">
                  <template slot="append">天</template>
                </el-input>
              </el-form-item> 
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="button_box">
        <el-button
          type="primary"
          :loading="AgreeLoading"
          @click="submitForm('ruleForm')"
        >保存提交</el-button>
        <el-button @click="handleClose">取消</el-button>
      </div>
    </ex-dialog>
  </template>
  <script>
  import Loading from "@/components/Loading/index";
  // api
  import {
    getConfigureDays,
    changeConfigureDays,
  } from "@/api/merchantsNFR/evaluate";
  export default {
    components: {
      Loading,
    },
    props: {
      visible: Boolean,
    },
    data() {
      var checkUseDays = (rule, value, callback) => {
          //总库存限制数量校验
          let regNumber = /^\+?[0-9]\d*$/; //大于0的正整数
        if (value === '' ) {
          return callback(new Error("请输入天数"));
        } else if (value > 999) {
          return callback(new Error("请输入大于等于0且小于等于999的正整数"));
        } else if (regNumber.test(value) == false) {
          return callback(new Error("请输入大于等于0且小于等于999的正整数"));
        } else {
          return callback();
        }
      };
      
      return {
        labelWidth: "150px",
        inputWidth: "420px",
        title: "评价配置",
        loading: false,
        disabled: false,
        AgreeLoading: false,
        ruleForm: {
          days: '',
        },
        residueStock: 0,
        cardList: [],//赚卡列表
        xzAssetList: [],//奖励发放条件列表
        incentiveTypeList: [
          {id: '1',value: '积分'},
          {id: '2',value: '勋章'},
        ],
        integralTypeList: [
          // {id: '1',value: 'CoCo'},
          {id: '2',value: '椰分'},
        ],
        equityCardList: [],
        isSel: true,
        rules: {
          days: [
            { required: true,validator: checkUseDays,trigger: ["change", "bulr"]}
          ],
         
  
        },
        
      };
    },
    computed: {},
    created() {
      this.getDays()
    },
    mounted() {
     
      
    },
    computed: {},
    methods: {
      //获取配置天数
      getDays(){
        var id = this.ruleForm.id
        getConfigureDays(id).then(res => {
            this.ruleForm.days = res.result
        })
      },

      //取消
      handleClose(formName) {
        this.$emit("update:visible", false);
      },
     
      getTime(e){
        console.log("e",e)
        this.ruleForm.startTime =  e[0] 
        this.ruleForm.endTime = e[1]
        console.log("e",this.ruleForm.startTime)
        console.log("e",this.ruleForm.endTime)
      },
      
      submitForm(formName) {
        console.log(this.ruleForm);
        //创建确定
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.AgreeLoading = true
            var data = {
              ...this.ruleForm
            }
            changeConfigureDays(data).then(res => {
              this.handleClose()
              this.$message.success('创建成功')
              this.$emit('success')
              this.AgreeLoading = false
            }).finally(()=>{
              this.AgreeLoading = false
            })
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      editForm(formName, status) {
        //编辑确定
        console.log(this.ruleForm);
        this.$refs[formName].validate(valid => {
          if (valid) {
            
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
    }
  };
  </script>
  <style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
      padding: 0 !important;
    }
  
    ::v-deep .ex--dialog--main {
      padding: 10px 20px !important;
    }
  }
  .el-select{
    width: 100%;
  }
  .main {
    padding: 20px 20px;
  }
  .richText {
    border: 1px solid #ccc;
    line-height: normal;
  }
  .stockNum{
    display: flex;
    justify-content: center;
    padding-top: 10px;
  }
  .button_box{
    display: flex;
    justify-content: center;
  }
  .equityImgBox{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .equityImgBox img{
    width: 120px;
    height: 120px;
  }
  .el-form-item{
    margin-bottom: 32px;
  }
  .list_start{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .el-input{
      width: 300px;
      margin-left: 10px;
    }
  }
  </style>
  